<template>
    <!-- 报警系统 -->
    <section>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{devicedata.deviceName}}</span>
            </div>
            <div class="content">
                <div class="content_left">
                    <el-dropdown>
                        <el-button type="primary">
                            布防<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="ipsbufang(devicedata,2)">外出布防</el-dropdown-item>
                          <el-dropdown-item @click.native="ipsbufang(devicedata,3)">留守布防</el-dropdown-item>
                          <el-dropdown-item @click.native="ipsbufang(devicedata,4)">最大布防</el-dropdown-item>
                          <el-dropdown-item @click.native="ipsbufang(devicedata,7)">立即布防</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    <!-- <el-button type="primary" @click="ipsbufang(devicedata)">布防</el-button> -->
                    <el-button type="success" @click="ipschefang(devicedata)">撤防</el-button>
                    <!-- <div v-for="(item,index) in devicedata.devicePoints" :key="index" class="text itembox">
                        <el-form ref="form" :model="form" size="mini" label-width="">
                            <el-form-item>
                                <div class="hangnei">
                                    <el-tooltip :content="item.pointName" :disabled="isShowTooltip" effect="dark"
                                        placement="top">
                                        <div class="labelname"
                                            @mouseover="onMouseOver('str_'+ devicedata.deviceId+'_'+index)">
                                            <span
                                                :ref="'str_'+ devicedata.deviceId+'_'+index">{{`${item.pointName}`}}</span>
                                        </div>
                                    </el-tooltip>
                                    <div class="caozuok">
                                        <el-popover :disabled="item.readOnly"
                                            :ref="'popover_' + devicedata.deviceId+'_'+index" placement="top"
                                            width="300" trigger="click">
                                            <el-form :inline="true" :model="formdata" class="demo-form-inline">
                                                <el-form-item :label="item.pointName">
                                                    <el-input v-model="formdata.value"></el-input>
                                                </el-form-item>
                                            </el-form>
                                            <div style="text-align: right; margin: 0">
                                                <el-button size="mini" type="text" @click="pClose(index)">取消</el-button>
                                                <el-button type="primary" size="mini" @click="setwrite(index,item,devicedata.deviceId)">确定
                                                </el-button>
                                            </div>
                                            <el-input @focus="inputfocus(item.value)" slot="reference" readonly
                                                v-if="item.valueType!='bool'" type="textarea" autosize placeholder="请输入"
                                                v-model="item.value"></el-input>
                                        </el-popover>
                                        <el-switch class="switch" :disabled="item.readOnly" v-if="item.valueType=='bool'"
                                            @change="setwrite(index,item,devicedata.deviceId)" v-model="item.value" active-value="1"
                                            active-text="ON" inactive-value="0" inactive-text="OFF">
                                        </el-switch>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div> -->
                </div>
                <div class="content_right">
                    <div class="imgbox">
                        <el-image class="imgbox_img" :src='devicedata.photoUrl!=null?devicedata.photoUrl:""'></el-image>
                    </div>
                </div>
            </div>
        </el-card>
    </section>
</template>

<script>
    import {
        // commandwrite
        hwAlarmDevDisArm,//撤防
        hwAlarmDevArm,//布防
        commandwrite
    } from '../../../url/api';
    export default {
        props: ['devicedata'],
        data() {
            return {
                isShowTooltip: false,
                money: 0,
                moduleData: {},
                form: {},
                formdata: {},
                visible: false,
                backupsDeviceData: '',
            }
        },
        watch: {
            devicedata(val) {
                console.log(val, "门禁卡片数据");
                this.backupsDeviceData = val;
            },
            // moduleInfor(val) {
            //     //console.log(val)
            //     this.moduleData = val
            // },
        },
        methods: {
            ipsbufang(device,index) {//布防
                debugger
                if (device.sn) {
                    let param = {
                        sn: device.sn,
                        how: index//
                    }
                    hwAlarmDevArm(param).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '指令下发成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message('指令下发失败')
                        }

                    });
                }else{
                    this.$message('设备异常！请联系管理员！')
                }
            },
            ipschefang(device) {//撤防
                if (device.sn) {
                    let param = {
                        sn: device.sn,
                    }
                    hwAlarmDevDisArm(param).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '指令下发成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message('指令下发失败！')
                        }

                    });
                }else{
                    this.$message('设备异常！请联系管理员！')
                }
            },
            onMouseOver(str) { // 内容超出，显示文字提示内容
                // console.log(str, "AAAAAAAAAAA");
                const tag = this.$refs[str]
                // console.log(tag, "BBBBBBBBBB");
                const neirongWidth = tag[0].firstChild.length // 内容长度

                this.isShowTooltip = neirongWidth <= 5;//大于五个字隐藏
                // console.log(this.isShowTooltip, neirongWidth, "CCCCCCCCCCC");
            },
            switchchange(data) {
                // console.log(data, "AAAAAAAAAAAAAAAAA");
            },
            handleCurrentPage(val) {//页码房间列表
                this.$emit('changePage', val)
            },
            pClose(index) {
                // console.log('popover_' + index);
                this.$refs['popover_' + this.devicedata.deviceId + '_' + index][0].doClose();
            },
            inputfocus(data) {
                // console.log(data);
                this.formdata = {
                    value: data
                }
                //    this.formdata.value = data
            },
            setwrite(index, item, deviceId) {
                console.log(item, this.devicedata);
                debugger
                let originalValue = item.value;
                let params = {
                    deviceId: deviceId,
                    // sn: item.sn,
                    value: item.value,
                    // valueType: item.valueType
                    pointId: item.pointId
                }
                let paramsdata = [];
                paramsdata.push(params);
                if (item.realType != 'bool') {
                    params.value = this.formdata.value
                }
                // params.deviceIds.push(this.devicedata.deviceId)
                // console.log(params);
                commandwrite(paramsdata).then((res) => {
                    console.log(res);
                    if (res.data.ok) {
                        // this.$emit('readData', params);
                        let data = res.data.data
                        data.forEach(val => {
                            this.$message.success('设备：' + val.deviceName + '  ， ' + val.result);
                        });
                    } else {
                        this.devicedata.devicePoints[index] = this.backupsDeviceData.devicePoints[index];//写操作失败，该值恢复之前值
                    }
                });
                this.$emit('readData', params);
                this.pClose(index)
            }

        },
        mounted() {
            this.backupsDeviceData = this.devicedata;
            console.log(this.backupsDeviceData, "门禁卡片数据");
            console.log(this.backupsDeviceData, "当前设备数据");
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;

        /* overflow-y: scroll; */
    }

    .itembox {
        margin-bottom: 10px;
    }

    .content {
        display: flex;
    }

    .content_left {
        width: 188px;
        height: 130px;
        /* white-space: nowrap; */
        overflow-y: scroll;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .clearfix {
        text-align: center;
        font-weight: 600;
        /* font-style: italic; */
        color: rgb(255, 255, 255);
        letter-spacing: 2px;
        font-size: 18px;

    }

    .box-card {
        /* width: 480px; */
        /* height: 240px; */
        overflow: hidden;
        margin: 10px 0 0 10px;
    }

    .imgbox_img {
        width: 260px;
        height: 130px;
    }

    .box-card>>>.el-card__body {
        padding: 5px !important;
    }

    .box-card>>>.el-card__header {
        background-color: #007674;
        padding: 10px !important;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 3px;
    }

    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
        background: #78b4b4;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 10px;
        background: #ededed;
    }

    .el-form-item {
        margin-bottom: 0px !important;
    }

    .hangnei {
        display: flex;
        align-items: center;
    }

    .labelname {
        font-size: 12px;
        display: inline-block;
        width: 73px;
        padding: 0 10px;
        /* text-align: center; */
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .caozuok {
        display: inline-block;
        width: calc(100% - 90px);
    }
</style>